<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学生档案</title>
		<link rel="stylesheet" href="css/学生档案.css" />
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			form{
				width: 600px;
				margin: 20px auto;
			}
			form>fieldset{
				padding: 10px;
			}
			form>fieldset>meter,
			form>fieldset>input{
				width: 100%;
				height: 40px;
				line-height: 40px;
				margin: 10px 0;
				border: none;
				border: 1px solid #ccc;
				border-radius: 4px;
				font-size: 16px;
				padding-left: 5px;
				/* width = 内容 + padding + border */
				box-sizing: border-box;
			}
			form>fieldset>meter{
				padding-left: 0;
			}
			
		</style>
	</head>
	<body>
		<form action="">
			<fieldset>
				<legend>学生档案</legend>
				<label for="">姓名：</label>
				<input type="text" name="username" id="username" placeholder="请输入用户名">	
				<label for="">手机号码：</label>
				<input type="tel" name="phone" id="phone" placeholder="请输入手机号" pattern="^(\+86)1/d{10}">	
				<label for="">邮箱地址：</label>
				<input type="email" name="email" id="email" placeholder="请输入邮箱">	
				<label for="">所属学院：</label>
				<input type="text" name="collage" id="collage" list="cList" placeholder="--请选择--">	
				<datalist id="cList" >
					<option value="java">java</option>
					<option value="c++">c++</option>
				</datalist>
				<label for="score">入学成绩：</label>
				<input type="number" max="100" min="0" value="0" name="score" id="score">	
				<label for="score">基础水平：</label>
				<meter id="score_meter" max="100" min="0" low="59" high="90"></meter>
				<label for="intime">入学日期：</label>
				<input type="date" name="intime" id="intime" >
				<label for="outtime">毕业日期：</label>
				<input type="date" name="outtime" id="outtime" >
				<input type="submit" />
			</fieldset>		
		</form>
		<script>
			document.getElementById("score").oninput=
				function(){
					document.getElementById("score_meter").value=this.value;
				}	
		</script>
	</body>
</html>